<template>
	<view class="my_steps">
		<ul class="steps_list">
			<li class="steps_list_item" v-for="(value, index) in data" :key="index">
				<!-- <text>流程</text> -->
				<view class="steps_icon">
					<uni-icons v-if="value.type=='1'&&value.isCompletedArr.every((i)=>i==2)" type="checkbox-filled" size="30" color="#55aaff"></uni-icons>				
					<uni-icons v-else-if="value.type=='2'&&value.isCompletedArr.some((i)=>i==2)" type="checkbox-filled" size="30" color="#55aaff"></uni-icons>	
					<uni-icons v-else-if="value.type=='3'&&value.isCompletedArr[0]==2" type="checkbox-filled" size="30" color="#55aaff"></uni-icons>
					
					<uni-icons v-else type="circle-filled" size="30" color="#55aaff"></uni-icons>
					<view class="title">
						{{value.taskName}}
					</view>
				</view>
				<view class="steps_main">
					<view class="list_item" v-for="(v,i) in value.taskList" :key="i">
						<text v-if="i>=1" style="margin-left: 30rpx;color: #000;">
							{{value.type=='1'?'+':'/'}}
						</text>
						<view class="name">
							<uni-icons v-if="v.isCompleted=='2'" type="checkbox-filled" size="26" color="#00aa00"></uni-icons>
							<uni-icons v-else type="info-filled" size="26" color="#ffaa00"></uni-icons>
							{{v.assignee}}
						</view>
						<view class="compName">
							{{v.compName||''}}
						</view>
						<view class="date">
							{{v.endTime||''}}
						</view>
					</view>
				</view>
			</li>
		</ul>
	</view>
</template>

<script>
	import basicProps from './props'
	export default {
		name: 'ProcessSteps',
		props: {
			data: {
			  type: Array,
			  default: () => [],
			},
		},
		data() {
			return {
				stepsData: [],
			}
		},
		watch: {
			data(newVal, oldVal) {
				console.log('newVal:', newVal);
				console.log('oldVal:', oldVal);
				if (newVal && newVal.someProperty) {
					console.log(newVal.someProperty);
				} else {
					console.log('someData is not fully defined');
				}
			},
		},
		onReady() {
			console.log(data)
		},
		onShow() {
			console.log(data)
		},
		methods: {

			/**
			 * @description: 返回上一页
			 * @param {*} 
			 * @return {*}
			 */
			backUp() {
				if (this._is_switchTab.before.status)
					uni.switchTab({
						url: '/' + this._is_switchTab.before.path
					})
				else uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/assets/styles/global.scss';

	.my_steps {
		
		.steps_list{
			
			list-style-type: none;
			
			.steps_list_item{
				position: relative;
				.steps_icon{
					display: flex;
					align-items: center;
					.title{
						font-size: 32rpx;
					}
				}
				&:last-of-type{
					.steps_main{
						border-left: 1px solid #fff;
					}
					
				}
				.steps_main{
					// display: flex;
					// flex-wrap: wrap;
					margin:10rpx 0 10rpx 25rpx;
					padding: 0 25rpx;
					border-left: 1px solid #55aaff;
					
					.list_item{
						margin-right: 20rpx;
						margin-bottom: 10rpx;
						color: #999;
						.name{
							display: flex;
							align-items: center;
							font-size: 30rpx;
							
						}
						.date{
							
						}
					}
				}
				
			}
		}
	}
</style>